<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
<script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/three.js/92/three.min.js " ></script>
    <link href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/sockjs-client/1.0.3/sockjs.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script th:src="@{../js/vendor/OrbitControls.js}"></script>
    <script th:src="@{../js/vendor/OBJLoader.js}"></script>
    <script th:src="@{../js/vendor/geometry.js}"></script>
<style>
html, body
{
    margin: 0;
    padding: 0;
}
</style>
</head>
<body>
        <div class="row">
            <div class="col-md-2">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <form role="form" class="form-inline">
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button type="button" class="btn btn-info"  onclick="connect()" id="start" value="连接">连接</button>
                                    <button type="button" class="btn btn-info"  onclick="disconnect()" id="end" value="连接">断开</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
<!--<script>

var three = THREE;

var scene = new three.Scene();
var camera = new three.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

var renderer = new three.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);



var geometry = new three.BoxGeometry(1, 1, 1);
//var material = new three.MeshNormalMaterial();
/* * /
var material = new three.MeshBasicMaterial({
    color: 0x00ff00
});
/* */
/* */
three.ImageUtils.crossOrigin = '';
var texture = three.ImageUtils.loadTexture('http://i.imgur.com/CEGihbB.gif');
texture.anisotropy = renderer.getMaxAnisotropy();

var material = new three.MeshFaceMaterial([
    new three.MeshBasicMaterial({
        color: 0x00ff00
    }),
    new three.MeshBasicMaterial({
        color: 0xff0000
    }),
    new three.MeshBasicMaterial({
        color: 0x0000ff
        //map: texture
    }),
    new three.MeshBasicMaterial({
        color: 0xffff00
    }),
    new three.MeshBasicMaterial({
        color: 0x00ffff
    }),
    new three.MeshBasicMaterial({
        color: 0xff00ff
    })
]);
/* */

var cube = new three.Mesh(geometry, material);
cube.rotation.x = 0;
cube.rotation.y =0;
cube.rotation.z = 0;
scene.add(cube);

camera.position.z = 2;

/* */
var isDragging = false;
var previousMousePosition = {
    x: 0,
    y: 0
};

/* */

$(document).on('mouseup', function(e) {
    isDragging = false;
});





/*
render();
update(0, totalGameTime);
*/















function toRadians(angle) {
	return angle * (Math.PI / 180);
}

function toDegrees(angle) {
	return angle * (180 / Math.PI);
}
renderer.render(scene, camera);
</script>-->
        <script>
            //document.getElementById( 'newWindow' ).href += window.location.hash;

            //var gui = new dat.GUI();
            var scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 50 );
            camera.position.z = 30;
            camera.position.y = -15;

            var renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.setClearColor( 0x000000, 1 );
            document.body.appendChild( renderer.domElement );

            var orbit = new THREE.OrbitControls( camera, renderer.domElement );
            orbit.enableZoom = false;

            var lights = [];
            lights[ 0 ] = new THREE.PointLight( 0xffffff, 1, 0 );
            lights[ 1 ] = new THREE.PointLight( 0xffffff, 1, 0 );
            lights[ 2 ] = new THREE.PointLight( 0xffffff, 1, 0 );

            lights[ 0 ].position.set( 0, 200, 0 );
            lights[ 1 ].position.set( 100, 200, 100 );
            lights[ 2 ].position.set( - 100, - 200, - 100 );

            scene.add( lights[ 0 ] );
            scene.add( lights[ 1 ] );
            scene.add( lights[ 2 ] );

            group = new THREE.Group();

            var geometry = new THREE.BufferGeometry();
            geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( [], 3 ) );

            var lineMaterial = new THREE.LineBasicMaterial( { color: 0xffffff, transparent: true, opacity: 0.5 } );
            var meshMaterial = new THREE.MeshPhongMaterial( { color: 0x156289, emissive: 0x072534, side: THREE.DoubleSide, flatShading: true } );

            group.add( new THREE.LineSegments( geometry, lineMaterial ) );
            group.add( new THREE.Mesh( geometry, meshMaterial ) );
            //console.log(group);
            var options = chooseFromHash( group );
            console.log(options);
            scene.background = new THREE.Color( 0xf0f0f0 );
            scene.add( group );
            var render = function () {
                //requestAnimationFrame( render );
                //group.rotation.y += 0.005;
                /*
                if ( ! options.fixed ) {

                    //group.rotation.x += 0.005;
                    group.rotation.y += 0.005;

                }
                */
                renderer.render( scene, camera );

            };

            window.addEventListener( 'resize', function () {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

            }, false );

            render();
        </script>
<script type="text/javascript">
    $("#end").hide();
    var stompClient = null;
    var boot=false;
    function connect() {
        const socket = new SockJS('/endpointSang');
        boot=true;
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function (frame) {
            stompClient.send("/welcome", {},null);//5
            stompClient.subscribe('/topic/mpu6050', function (response) {
                let devic=JSON.parse(response.body);
                let data=JSON.parse(devic.body).data;
                console.log(data);
                if(data.angle!=null){
/*                    cube.rotation.x =data.angle[0] ;
                    cube.rotation.y = data.angle[1];*/
                    group.rotation.x =data.angle[0]*Math.PI/180 ;
                    group.rotation.y = data.angle[1]*Math.PI/180 ;
                    group.rotation.z =data.angle[2]*Math.PI/180 ;
                    render();
                }
            });
        });
        $("#start").hide();
        $("#end").show();
    }
    function disconnect() {
        if (stompClient != null) {
            stompClient.disconnect();
            $("#start").show();
            $("#end").hide();
        }
    }

</script>
</body>
</html>
